import 'package:flutter/material.dart';
import 'package:t_flutter_test/component/layout_widget.dart';
import 'package:t_flutter_test/component/common_button.dart';
import 'package:t_flutter_test/component/common_item.dart';
import 'package:t_flutter_test/contants/index.dart' show BtnItem, IndexValue;

class File06 extends StatefulWidget {
  const File06({super.key});

  @override
  File06State createState() => File06State();
}

class File06State extends State<File06> {
  final List<BtnItem> btnList = [
    BtnItem(text: '普通列表', index: IndexValue.one),
    BtnItem(text: 'builder列表', index: IndexValue.two),
    BtnItem(text: '含分割线的builder列表', index: IndexValue.three),
  ];

  // 展示的内容
  IndexValue showIndex = IndexValue.one;

  @override
  Widget build(BuildContext context) {
    return LayoutWidget(
      body: Container(
        padding: EdgeInsets.only(top: 10),
        child: Column(
          spacing: 10,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children:
                  btnList.map((item) {
                    return CommonButton(
                      onPressed: () {
                        setState(() {
                          showIndex = item.index;
                        });
                      },
                      child: Text(item.text),
                    );
                  }).toList(),
            ),
            Expanded(
              // 普通列表
              child: IndexedStack(
                index: showIndex.index,
                children: [
                  File06GeneralList(),
                  File06BuilderList(),
                  File06BuilderListWithSeparator(),
                ],
              ),
              // showIndex == IndexValue.one
              //     ? File06GeneralList()
              //     : showIndex == IndexValue.two
              //     ? File06BuilderList()
              //     : File06BuilderListWithSeparator(),
            ),
          ],
        ),
      ),
    );
  }
}

// 普通列表
class File06GeneralList extends StatelessWidget {
  File06GeneralList({super.key});

  final List<CustomCommonItem> list = [
    CustomCommonItem(color: Colors.blue, text: '鸿蒙大事件1', height: 80),
    CustomCommonItem(color: Colors.pink, text: '鸿蒙大事件2', height: 90),
    CustomCommonItem(color: Colors.purple, text: '鸿蒙大事件3', height: 100),
    CustomCommonItem(color: Colors.green, text: '鸿蒙大事件4', height: 110),
    CustomCommonItem(color: Colors.red, text: '鸿蒙大事件5', height: 120),
    CustomCommonItem(color: Colors.orange, text: '鸿蒙大事件6', height: 130),
    CustomCommonItem(color: Colors.blue, text: '鸿蒙大事件7', height: 140),
    CustomCommonItem(color: Colors.green, text: '鸿蒙大事件8', height: 150),
    CustomCommonItem(color: Colors.red, text: '鸿蒙大事件9', height: 160),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView(
      // physics: const NeverScrollableScrollPhysics(), // 禁用滚动
      scrollDirection: Axis.vertical,
      children: [
        for (var i = 0; i < list.length; i++) CommonItem(item: list[i]),
      ],
    );
  }
}

// ListView.builder 列表
class File06BuilderList extends StatelessWidget {
  const File06BuilderList({super.key, this.list = const []});

  final List<CustomCommonItem> list;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return File06Container();
      },
      itemCount: 12,
    );
  }
}

// 含分割线的 ListView.builder 列表
class File06BuilderListWithSeparator extends StatelessWidget {
  const File06BuilderListWithSeparator({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemBuilder: (context, index) {
        return File06Container();
      },
      separatorBuilder: (BuildContext context, int index) {
        return Container(
          margin: const EdgeInsets.symmetric(horizontal: 10),
          height: 1,
          color: const Color.fromARGB(255, 210, 209, 209),
        );
      },
      itemCount: 12,
    );
  }
}

class File06Container extends StatelessWidget {
  const File06Container({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      color: Colors.red[90],
      child: Container(
        padding: const EdgeInsets.all(8),
        // padding: EdgeInsets.only(left: 10, right: 10),
        // padding: EdgeInsets.symmetric(horizontal: 10), // 同上
        child: Row(
          spacing: 8,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Image.network(
              'https://yanxuan-item.nosdn.127.net/e529b6ab111ade9da9314867f98d360f.png',
              width: 90,
            ),
            const Expanded(
              child: Text(
                '海尔（Haier）波轮洗衣机全自动家用 10公斤大容量 直驱变频 一级能效 高效精华洗 以旧换新EB100B37Mate5',
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            const Icon(Icons.access_time_filled),
          ],
        ),
      ),
    );
  }
}
